<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择框</title>
</head>
<body>
<!--view层，模板-->
<div id="ace">
    <label>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </label>
    <span>Selected: {{ selected }}</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    let vue = new Vue({
        el: '#ace',
        data: {
            selected: ''
        }
    });
</script>
<!--select 字段将 value 作为 prop 并将 change 作为事件-->
<!--如果 v-model 表达式的初始值未能匹配任何选项，`` 元素将被渲染为“未选中”状态。
在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。
因此，更推荐像上面这样提供一个值为空的禁用选项。-->
</body>
</html>